<template>
	<view class="page must_know" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>
		<view class="content">
			<view class="content-list" v-for="(item, index) in tabList" :key="index">
				<view class="card" @click="tabListDetails(item)">
					<view class="image">
						<image :src="item.urlList[0]" mode="aspectFill"></image>
					</view>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" color="#007aff" />
	</view>
</template>

<script>
	import uniLoadMore from '@/compoments/load-more/index.vue'
	export default {
		data() {
			return {
				title: '特色美食',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fineVal: '', //餐饮搜索
				status: 'more', //加载状态

				fromList: {
					limit: 10,
					page: 1,
				},
				AddressList: [],
				tabList: {}

			}
		},
		onLoad() {
			//uni.startPullDownRefresh();
			this.getRoomsList()
			// this.getselectScenicList()
			this.getRooms()
		},
		// 下拉刷新
		onPullDownRefresh() {},
		// 上拉加载
		onReachBottom() {
			console.log(this.status, '-----');
			if (this.status != 'noMore') {
				this.status = 'loading'
				// uni.showNavigationBarLoading()
				this.getRoomsList()
			}
		},

		methods: {
			// 去特色美食详情
			tabListDetails(item) {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/tabListDetails?list=" + JSON.stringify({
						...item
					})
				})
			},
			// 特色美食
			navTabList() {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/tabList'
				})
			},

			getRoomsList() {
				let that = this
				this.$api.get('/api/isspecialfood/page', this.fromList)
					.then(res => {
						console.log(res);
						if (res.data.code === 0) {
							that.fromList.page++;
							let {
								list,
								total
							} = res.data.data;
							if (that.tabList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.tabList = [...that.tabList, ...list];
							console.log('--------', that.tabList);
						} else that.$showToast(res.data.msg);
					})
			},

			getRooms() {
				this.$api.get('/api/isspecialfood/page', this.fromList)
					.then(res => {
						console.log(res);
						this.tabList = res.data.data.list
					})
			},


		}
	}
</script>
<style lang="less">
	.u-cell__body {
		// padding: 24rpx !important;
		background-color: #fff !important;
		margin: 20rpx !important;
		border-radius: 16rpx !important;
	}

	.u-line {
		border-color: #f5f9fa !important;
	}

	.u-scroll-list__indicator__line {
		height: 0 !important;
	}
</style>
<style scoped lang="scss">
	.page {
		width: 100vw;
		box-sizing: border-box;
		// background-color: #f5f9fa;

	}

	.content {
		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;

		.content-list {
			width: 340rpx;
			height: 410rpx;
			margin: 20rpx 0rpx 15rpx;

			.card {
				border-radius: 20rpx;
				width: 340rpx;
				height: 410rpx;
				margin: 20rpx 0rpx 15rpx;
				// background-color: #fff;
				// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				.image {
					border-radius: 20rpx;
					width: 340rpx;
					height: 308rpx;

					image {
						border-radius: 20rpx;
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 28rpx;
					color: #111111;
					font-weight: Bold;
					width: 100%;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}
			}

		}
	}
</style>